# Component: Stream Media Item

Visual card/list for streaming content with embedded players and metadata

Media Block

### BEM Anatomy

| Type      | Class Name                | Description                                                                                                                                                                                        |
| --------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-stream-media-item`   | The top-level container. Implements `height: 100%` to ensure card alignment in grids.                                                                                                              |
| Modifier  | `--card`                  | Default layout mode. Centers content text and maintains fixed height.                                                                                                                              |
| Modifier  | `--list`                  | Alternative horizontal layout mode. Sets a fixed image width and flex-grows the content area.                                                                                                      |
| Element   | `__image`                 | The thumbnail or hero image for the media item, typically housed within the `__video` container.                                                                                                   |
| Element   | `__content`               | The textual wrapper (Title, Description). Uses `flex-grow: 1` to push the footer downward.                                                                                                         |
| Element   | `__title`                 | The primary headline for the media item.                                                                                                                                                           |
| Element   | `__description`           | The teaser or summary text; usually truncated via line-clamp.                                                                                                                                      |
| Element   | `__footer`                | The bottom metadata section. Uses `margin-top: auto` to stick to the bottom of the card.                                                                                                           |
| Element   | `__footer-wrapper`        | Internal flex container for footer items, managing horizontal alignment and gaps.                                                                                                                  |
| Element   | `__footer-item`           | Individual metadata nodes (date, time, category).                                                                                                                                                  |
| Modifier  | `__footer-item--date`     | Specific styling for the broadcast or release date.                                                                                                                                                |
| Modifier  | `__footer-item--height`   | A specialized structural modifier applied to a collapse-preventing element. It ensures that even if certain metadata is missing, the footer maintains a consistent height to prevent layout jumps. |
| Modifier  | `__footer-item--time`     | Container for the program's schedule window.                                                                                                                                                       |
| Element   | `__time-from`             | The starting timestamp for a program.                                                                                                                                                              |
| Element   | `__time-dash`             | A decorative or functional separator (usually a "—") between start and end times.                                                                                                                  |
| Element   | `__time-to`               | The ending timestamp for a program.                                                                                                                                                                |
| Modifier  | `__footer-item--watch`    | Identifies the "Watch Now" or "Live" status area.                                                                                                                                                  |
| Modifier  | `__footer-item--provider` | Displays the source or network logo/name.                                                                                                                                                          |
| Element   | `__link`                  | The functional anchor wrapping the entire component or specific CTA areas. Ensures the item is accessible via keyboard and screen readers.                                                         |
| Element   | `__card`                  | The internal structural box (usually a `.card` class) that provides the background color, padding, and border radius for the `--card` modifier layout.                                             |
| Element   | `__video`                 | A `16x9` ratio container. Orchestrates the `iframe` or thumbnail image/overlay logic.                                                                                                              |
| Modifier  | `__footer-item--button`   | A wrapper used when the footer contains an interactive trigger.                                                                                                                                    |
| Element   | `__film-button`           | The specialized action button used to launch the media player or film details.                                                                                                                     |

### Media Rendering Logic

The component features a tiered rendering system for the video area. If embedded playback is enabled and a URL exists, it shows a loading spinner overlay followed by the `iframe`. Otherwise, it falls back to a thumbnail with a **State** block overlay (play button).

##### Generated HTML (Card Mode)

```html
<div class="as-stream-media-item as-stream-media-item--card">
    <a href="..." class="as-stream-media-item__link">
        <div class="as-stream-media-item__card card">
            <div class="as-stream-media-item__video ratio ratio-16x9">
                <img src="thumb.jpg" class="as-stream-media-item__image" />
                <div class="as-state as-state--clickable">
                    <i class="as-state__icon fa-solid fa-circle-play"></i>
                </div>
            </div>
            <div class="as-stream-media-item__content card-body">
                <div class="as-stream-media-item__title">Stream Title</div>
            </div>
        </div>
    </a>
</div>
```

##### SCSS

```scss
.as-stream-media-item {
  &__footer-wrapper {
    display: flex;
    justify-content: space-between;
  }

  &__film-button {
    border-radius: 50%; // Circular action button
  }

  &--list {
    &__link {
      display: flex; // Horizontal layout
      height: 100%;
    }
    &__image {
      flex-shrink: 0;
      width: 120px;
    }
  }
}
```
